<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" :src="imgObj">
        <!-- <van-image class="logo" :src="require('../../assets/toutiao_logo.png')"></van-image> -->
      </template>
      <template #right>
        <van-icon @click="$router.push({name: 'Search'})" name="search" color="#fff" size="0.48rem"></van-icon>
      </template>
    </van-nav-bar>

    <!-- 频道部分 tabs标签栏 -->
    <van-tabs v-model="active" sticky offset-top="1.22666667rem">
      <van-tab
       :name="obj.id"
       v-for="obj in userList" :key="obj.id" :title="obj.name">
        <!-- 文章列表内容区域(点击tab导航，切换的是这个地方的标签，在这里显示) -->
        <!-- (重要)： 每个tab导航对应自己的ArticleList(每次循环都是独立的) -->
        <!-- van-pull-refresh  下拉刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" loading-text=" ">
          <van-list
            v-if="articleList.length !== 0"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ArticleList @removeA="removeFn" :list="articleList"></ArticleList>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

    <!-- 右侧的编辑频道的小图标 +  size改成rem单位 -->
    <van-icon @click="show = true" name="plus" class="moreChannels" size="0.37333333rem" />

    <!-- 弹出层组件 -->
    <!-- close-on-click-overlay 是否在点击遮罩层后关闭（false 不关闭） -->
    <van-popup v-model="show" :close-on-click-overlay="false">

      <!-- 弹出层上要显示的内容 -->
      <div class="popup-container">
        <!-- 弹出层的头部区域 -->
        <van-nav-bar title="频道管理">
          <template #right>
            <!-- 右上角X按钮，点击关闭弹出层 -->
            <van-icon name="cross" size="0.37333333rem" color="white" @click="closeFn"/>
          </template>
        </van-nav-bar>

        <!-- 弹出层的主体区域 -->
        <div class="pop-body">
          <ChannelEdit v-model="active"
          @closePop="show = false"
           :userList="userList" :allList="allList"
            @updateChannel="updateChannelFn"
            ref="channel"
          ></ChannelEdit>
        </div>
      </div>
    </van-popup>
  </div>

</template>

<script>
import ChannelEdit from './ChannelEdit'
import logoPng from '../../assets/toutiao_logo.png'
import { userChannelAPI, getArticleListAPI, dislikeArticleAPI, reportsAPI, allChannelAPI, updateChannelAPI } from '@/api'
import ArticleList from '@/views/Home/components/ArticleList'
import { Toast } from 'vant'
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      show: false, // 频道 + 编辑层
      allList: [], // 所有频道数据
      active: 0, // tabs导航选中的频道id
      imgObj: logoPng,
      userList: [], // 用户已选的频道数组
      articleList: [], // 文章数据
      selChannelId: 0, // 选中的频道ID
      isLoading: false, // 下拉中的加载中 下拉时，vant组件内会自动把这个变量改成true
      loading: false, // 上拉(底部) -- 加载中状态
      finished: false, // 控制是否还有更多数据
      page: 1, // 控制当前要第几页的数据
      allArticleObj: {} // 缓存 - 所有文章的数据
    }
  },
  async created () {
    // 频道导航
    const [, res] = await userChannelAPI()
    // console.log(res)
    this.userList = res.data.data.channels

    // this.getArticleList() // 网页刚打开 - 默认先显示推荐频道(推荐频道id是0)的数据， 和onLoad事件中的this.getArticleList() 实现的功能一样

    // 不让onLoad上来执行，自己去发送网络请求拿到第一次切换路由第一页的数据
    this.getArticleList(true)

    // 获取所有的频道数据
    const [, resAll] = await allChannelAPI()
    // console.log(resAll)
    this.allList = resAll.data.data.channels
  },
  watch: {
    active () { // 侦听频道id改变, 重新请求频道下属的文章数据
      this.selChannelId = this.active
      this.articleList = []
      this.page = 1
      this.getArticleList(false) // 重复切换的频道不需要发请求了
    }
  },
  methods: {
    // 获取文章列表数据
    async getArticleList (bool) {
      // 逻辑变量上的缓存-把请求过的数据缓存起来
      if (this.allArticleObj[this.active] && bool === false) { // 如果有缓存的数据,不需要再次发请求
        this.articleList = this.allArticleObj[this.active]
        return
      }

      const [, articleRes] = await getArticleListAPI({
        channel_id: this.selChannelId,
        timestamp: new Date().getTime().toString(), // 字符串格式
        with_top: 1,
        page: this.page // 添加一个page参数
      })

      // 判断无更多数据
      // ?.  ES6新出的访问属性的方式: 如果data是undefined 就不会继续往下.了
      if (articleRes.data.data?.results.length === 0) {
        this.finished = true // 底部提示用户没有更多数据了
        return // 阻止代码继续向下
      }
      // console.log(articleRes)
      // this.articleList = articleRes.data.data.results
      // 新页面的数据我们要push到当前数组末尾
      // articleRes.data.data.results.forEach(obj => this.articleList.push(obj))
      this.articleList = [...this.articleList, ...articleRes.data.data.results]

      // 缓存到allArticleList变量中
      // 频道id作为大对象的key,对应的就是数据
      this.allArticleObj[this.active] = this.articleList

      // console.log(this.articleList)
      this.isLoading = false // 数据请求成功/失败回来后，都把下拉加载 isLoading 关闭
      this.loading = false // (数据请求成功/失败回来后)，底部加载更多改成false,如果不改，触底就不会再触发
      Toast.clear() // 数据请求成功or失败回来后，把轻提示 关闭
    },
    // 切换频道 获取id
    // tabFn (nameVal) { // tabFn(name, title) 两个固定参数
    //   // 重要：vant组件 -- 内部得支持事件，我们才能使用
    //   // 原因：因为你的@click事件绑定在了组件身上，而非实际的标签，网页上点击的都是实际的标签
    //   // 如果组件内部实现了click你能用@click绑定 -- Tabs组件在van-tabs身上才支持点击事件
    //   // console.log(nameVal)
    //   this.articleList = [] // 清空频道数组里的数据, 解决切换频道数据显示不对的问题
    //   this.getArticleList(nameVal) // van-tab身上name的值, 绑定频道id
    //   this.selChannelId = nameVal // 把选中的频道id保存起来
    // },
    onRefresh () { // 下拉刷新
      this.articleList = [] // 清空频道数组里的数据
      this.isLoading = false // 加载中圈圈看不见(换成Toast轻提示)
      this.page = 1 // 将page改为1，请求第一页数据
      this.getArticleList(true) // 重新发送请求
      Toast.loading({
        message: '加载中...',
        forbidClick: true, // 是否禁止背景点击
        duration: 0 // 展示时长(ms)，值为 0 时，toast 不会消失(在请求完成时关闭)
      })
    },
    onLoad () { // 上拉加载更多(list组件触底自动触发, 并且自动loading改为true, 让底部加载中出现)
      this.getArticleList(true)
      this.page++
    },
    async removeFn (art_id, type) { // 删除文章
      const index = this.articleList.findIndex(obj => obj.art_id === art_id) // 找到文章id匹配的元素下标
      this.articleList.splice(index, 1) // 删除本地文章

      // type有值，就是举报，无值就是不感兴趣
      if (type === undefined) { // 点击的不感兴趣
        // 调用后台业务-删除这个文章
        await dislikeArticleAPI({
          target: art_id
        })
      } else { // type有值，就是举报
        await reportsAPI({
          target: art_id,
          type: type
        })
      }

      // 删除后少了一个，解决方案
      // 方案1：找后台在这个接口返回一个候补数据(性能高)
      // 方案2：获取当前列表数据(从1页，重新拿数据)
      this.page = 1
      this.articleList = []
      this.getArticleList()
    },
    async updateChannelFn (userChannelList) { // 更新频道
      // console.log(userChannelList)
      // 手动修改发给后台的参数
      // 注意: 让这个数组和里面的数组脱离关系
      // 因为我要修改数组里的字段, 内部引用关系也会跟着变
      let arr = JSON.parse(JSON.stringify(userChannelList))
      arr = arr.map((obj, index) => {
        delete obj.name // 删除obj对象里name字段和值
        obj.seq = index
        return obj
      })
      arr.splice(0, 1) // 删除第一个 推荐 频道 不用传
      await updateChannelAPI({ // 把准备好的频道数据，发给后台保存起来
        channels: arr
      })
    },
    closeFn () { // 弹出层 右上角关闭按钮
      this.show = false // 关闭弹出层呢个
      this.$refs.channel.isShow = false // 把ChannelEdit内的isShow变量设置回初始化状态(频道编辑状态)
    }
  }

  // 目标: 上拉加载更多
  // 1. 集成van-list组件(注册-使用-定义变量)
  // 2. 思路: 后台传page参数-告诉后台我要第几页的数据 (准备data里page:1)
  // 3. onLoad执行(list组件触底了自动执行), this.page++页码+1, 再调用请求方法(拿到下一页的数据)
  // 4. 把新的数据放到当前数组的末尾处(页面更新更多) - (切记:不要忘了给loading: false) - 让下次触底正常触发
  // 细节:
  // 1. 没有更多数据, 判断数组长度为0, list提示没有更多数据(finished: true)
  // 2. 加载更多以后, 下拉刷新, 页码一定要改为1

  // 目标: 图片懒加载
  // 延迟加载, 提高性能(只显示页面上的见的这一屏数据)
  // 图片懒加载: 在图片出现在网页可视区域时, 再去加载图片地址显示图片
  // 原理:
  // 1. 先不给img的src属性赋值, 保存在另一个属性上
  // 2. 滚出去的+屏幕高度 大于 图片距离顶部值, 给当前img设置src
  // 使用:
  // vant组件库 v-lazy替代src属性

  // 目标: 点击+出现编辑频道的遮罩层
  // 1. 先准备弹出层van-popup(根据文档指示使用)
  // 2. 点击+, 设置van-popup的v-model为true (遮罩层)出现
  // 3. 自定义van-popup内的自定义内容(头部导航, 下面内容区域) - 内容区域封装了一个组件ChannelEdit.vue (注册使用)
  // 4. 调整弹出层内容宽度和高度为100%
}
</script>

<style lang="less" scoped>
.home-container {
  padding-top: 46px;
}

.logo {
  height: 80%;
}

// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

/deep/ .van-popup {
  width: 100%;
  height: 100%;
}

// 弹出层容器宽度高度铺满屏幕
/*频道编辑弹出层 */
// .edit_wrap{
//   width: 100%;
//   height: 100%;
// }
</style>
